<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showDialog } from 'vant'
import tabbar from '@/components/tabbar.vue'
import navbar from '@/components/navbar.vue'

// defineProps<{ msg: string }>()

const active = ref(0)
// const username = ref('')
// const password = ref('')
// ruoter
const router = useRouter()

const value = ref('123')
const showKeyboard = ref(true)

const value1 = ref('')
const value2 = ref('')
const value3 = ref('abc')
const value4 = ref('')
const pattern = /\d{6}/

// 校验函数返回 true 表示校验通过，false 表示不通过
const validator = (val) => /1\d{10}/.test(val)

// 校验函数可以直接返回一段错误提示
const validatorMessage = (val) => `${val} 不合法，请重新输入`

// 校验函数可以返回 Promise，实现异步校验
const asyncValidator = (val) =>
  new Promise((resolve) => {
    showLoadingToast('验证中...')

    setTimeout(() => {
      closeToast()
      resolve(val === '1234')
    }, 1000)
  })

const result = ref('')
const showPicker = ref(false)
const columns = [
  { text: '服务器', value: 'Hangzhou' },
  { text: '服务器', value: 'Ningbo' },
  { text: '服务器', value: 'Wenzhou' }
]

const onConfirm = ({ selectedOptions }) => {
  result.value = selectedOptions[0]?.text
  showPicker.value = false
}

onMounted(() => {
  // showDialog({
  //   message: '你当前不具备支付督察信息员资格！\n请进行资格申请',
  //   theme: 'round-button',
  //   confirmButtonText: '申请资格'
  // }).then(() => {
  //   // on close
  //   router.push({ path: 'application' })
  // })
})
</script>

<template>
  <navbar title="模拟商户" :left="true"> </navbar>
  <div class="page">
    <div class="top">
      <van-cell-group>
        <van-cell title="" is-link center>
          <template #title>
            <div class="custom-title" @click="goToChat">
              <div class="logo">
                <img src="../../../assets/img/chat/default-user.png" />
              </div>
              <div>
                <h3>打开模拟账户</h3>
                <p>学习交易和测试您的策略</p>
              </div>
            </div>
            <!-- <van-tag type="primary">标签</van-tag> -->
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="title">登录一个已有账户</div>
    <van-form @failed="onFailed">
      <van-cell-group inset>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          label="登录"
          v-model="value1"
          name="pattern"
          input-align="right"
          placeholder="正则校验"
          :rules="[{ pattern, message: '请输入正确内容' }]"
        />
        <!-- 通过 validator 进行函数校验 -->
        <van-field
          label="密码"
          v-model="value2"
          name="validator"
          input-align="right"
          placeholder="函数校验"
          :rules="[{ validator, message: '请输入正确内容' }]"
        />
        <!-- 通过 validator 返回错误提示 -->
        <van-field input-align="right" v-model="result" is-link readonly name="picker" label="服务器" placeholder="点击" @click="showPicker = true" />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
        </van-popup>

        <!-- 通过 validator 进行异步函数校验 -->
        <van-field name="checkbox" label="保存密码" input-align="right">
          <template #input>
            <van-checkbox v-model="checked" shape="square" />
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px; text-align: center">
        <van-button class="btn-style" type="primary" native-type="submit" color="#f4c159"> 提交 </van-button>
      </div>
    </van-form>
  </div>
</template>

<style scoped lang="scss">
.page {
  padding: 10px;
  .top {
    box-shadow: 0 0 3px 1px #0000004d;
  }
  .title {
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    padding: 20px;
  }
  .btn-style {
    width: 3.2rem;
    color: #000 !important;
    box-shadow: 0 0 3px 1px #0000004d;
  }
}
.custom-title {
  display: flex;
  p {
    font-size: 12px;
    color: #999;
  }
  .logo {
    margin-right: 10px;
  }
  img {
    width: 40px;
    height: 40px;
  }
}
</style>
